/* SPDX-License-Identifier: Apache-2.0 */

/*
  A section that is the height of the viewport.

  <div class="viewport-section">
    <div class-"viewport-section__content">
      <h1 class="viewport-section__heading">Heading here</h1>
      <!-- search here -->
      <div class="viewport-section__text">
        <!-- text here -->
      </div>
    </div>
  </div>

  Modifiers:
    - dark: Applies a dark blue background
    - ee: special design for 404 page, incl. video
*/

.viewport-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  &__content {
    text-align: center;
    min-width: 0;
  }

  &__heading {
    font-size: 2.4rem;
    padding: $spacing-unit $half-spacing-unit;

    @media screen and (max-width: $small-tablet) {
      font-size: 1.5rem;
    }
  }

  &__text {
    margin-top: $spacing-unit;
    padding: $spacing-unit $half-spacing-unit;
  }

  &__rule {
    margin: 50px auto;
    width: 300px;
    max-width: 100%;
    border: 0;
    height: 2px;
    background: rgb(255 255 255 / 50%);
  }

  &--dark {
    background-color: $primary-color;
    color: $white;

    a {
      @include white-underlined-link;
    }
  }

  &--ee {
    min-height: auto;
    padding: ($spacing-unit * 4) 0;

    @media screen and (max-width: $small-tablet) {
      padding: ($spacing-unit * 2) 0;
    }

    .viewport-section__heading {
      display: inline;
      font-family: Ewert, cursive;
      font-weight: 400;
      color: darken($primary-color, 15);
      background: $highlight-color;

      span {
        line-height: 1;
        padding-bottom: 30px;
        font-size: 3.5rem;

        @media screen and (max-width: $desktop) {
          font-size: 2.8rem;
        }

        @media screen and (max-width: $tablet) {
          font-size: 2.1rem;
        }

        @media screen and (max-width: $small-tablet) {
          font-size: 1.8rem;
        }

        @media screen and (max-width: $mobile) {
          font-size: 1.2rem;
        }
      }
    }

    .viewport-section__video {
      // make the video responsive :)
      width: 800px;
      max-width: 80%;
      margin: ($spacing-unit * 4) auto 0;

      @media screen and (max-width: $small-tablet) {
        margin: $spacing-unit auto 0;
      }

      .viewport-section__video-container {
        float: none;
        clear: both;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        margin-bottom: 25px;
        height: 0;
        background-color: darken($primary-color, 15);
        border: 9px dashed #fff;
        outline: 9px solid darken($primary-color, 15);

        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
